<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 36px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #222222;
        line-height: 50px;
        letter-spacing: 0px;
      }
      .iconfont.f88 {
        font-size: 88px;
      }
      .right {
        font-size: 28px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #181a39;
        line-height: 40px;
        letter-spacing: 0px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 导航栏
    van-nav-bar
       title:中间标题
       left-text:左边文本
       right-text:右边文本
       left-arrow:左边小箭头
       @click-left:左边点击
       @click-right:右边点击
       slot:title/left/right
     -->
      <van-nav-bar
        title="导航栏"
        left-text="左边文本"
        right-text="右边文本"
        :left-arrow="true"
        @click-left="clickLeft"
        @click-right="clickRight"
      >
        <template #title>
          <div class="title">
            修改昵称
          </div>
        </template>
        <template #left>
          <i class="iconfont f88">&#xe637;</i>
        </template>
        <template #right>
          <div class="right">
            保存
          </div>
        </template>
      </van-nav-bar>
    </div>
    <!-- 引入样式文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.11/lib/index.css"
    />
    <link rel="stylesheet" href="./font/iconfont.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.11/lib/vant.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {},
        methods: {
          clickLeft () {
            alert('left')
          },
          clickRight () {
            alert('right')
          }
        }
      })
    </script>
  </body>
</html>
